<template>
	<div class="kouDataDev">
		<HyCard title="驾驶舱建设">
			<el-descriptions :column="1" border>
				<el-descriptions-item label="应用简介">{{ message?.dev?.dveInfo?.introduction }} </el-descriptions-item>
				<el-descriptions-item label="开发目标">{{ message?.dev?.dveInfo?.target }} </el-descriptions-item>
			</el-descriptions>
		</HyCard>
		<HyCard title="数字化应用需求现状">
			<el-descriptions :column="1" border>
				<el-descriptions-item label="开发系统现状">{{ message?.dev?.dveInfo?.systemStatus }} </el-descriptions-item>
				<el-descriptions-item label="数据资源开发利用现状">{{ message?.dev?.dveInfo?.dataStatus }} </el-descriptions-item>
				<el-descriptions-item label="网络系统现状">{{ message?.dev?.dveInfo?.netStatus }} </el-descriptions-item>
				<el-descriptions-item label="数据化应用基础设施现状">{{ message?.dev?.dveInfo?.basicStatus }} </el-descriptions-item>
			</el-descriptions>
		</HyCard>
		<HyCard title="附件">
			<div class="longRever">
				<FilePreview :type="'view'" v-model="message.dev.files" />
			</div>
		</HyCard>
	</div>
</template>

<script lang="ts" setup>
import HyCard from '../Card.vue';
import textImg from './textImg.vue';
import FilePreview from '/@/components/HyUpload/index.vue';
import { toRefs, defineProps, ref } from 'vue';
const props = defineProps({
	message: {
		type: Object,
	},
});

const { message } = toRefs(props);
</script>

<style lang="scss" scoped>
.kouDataDev {
	width: 100%;
	:deep(.el-descriptions__label) {
		width: 15% !important;
	}

	.longRever {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.item_box {
			width: 30%;
			margin: 5px 0px;
			display: flex;
			flex-wrap: wrap;

			.item_name {
				color: #999999;
				width: 120px;
				text-align: right;
			}
			.item_content {
				flex: 1;
			}
		}

		.item_box_w {
			width: 100%;
			margin: 5px 0px;
			display: flex;
			// flex-wrap: wrap;

			.item_name {
				color: #999999;
				width: 120px;
				text-align: right;
			}
			.item_content {
				flex: 1;
			}

			.table {
				flex: 1;
			}
		}
	}

	:deep(.el-card) {
		border: 0px;
	}

	:deep(.el-card:hover) {
		box-shadow: 0 0 0px 0px;
	}

	:deep(.el-card__header) {
		background-color: #ffffff;
	}
}
</style>
